<template>
  <div class="classify">
    <van-tree-select
      :items="items"
      :main-active-index.sync="activeIndex"
      class="select"
      @click-nav="clickNav"
    >
      <template
        slot="content"
        class="content"
      >
        <div
          class="cf_r_item f0"
          v-for="(item,index) in items"
          :key="index"
          id="item"
          v-show="select===index"
        >
          <p class="title"><span class="rx">{{item.text}}</span> 大家喜欢吃才,是真的好吃</p>
          <van-card
            v-for="(food,index) in foods[index]"
            price="2.00"
            :title="food.name"
            :thumb="food.icon"
            :key="index"
          >
            <div
              slot="desc"
              class="desc"
              @click="goInfo(food.id)"
            >
              <p class="d1">{{food.description}}</p>
              <p class="d2">月售{{food.sellCount}} 好评{{food.rating}}%</p>
              <van-tag
                plain
                type="danger"
              >5.5折</van-tag>
            </div>
            <div
              slot="price"
              class="price"
            >
              <div class="p_l">
                <span class="new">¥{{food.price}}</span>
                <span class="old">{{food.oldPrice}}</span>
              </div>
            </div>
            <div slot="num">
              <van-icon
                name="add"
                color='rgb(35, 149, 255)'
                size='30px'
                @click="addCart(food)"
              />
            </div>
          </van-card>
        </div>

      </template>
    </van-tree-select>
    <van-submit-bar
      :price="total*100"
      button-text="去结算"
      class="barBottom"
      @submit="goPay"
    >
      <van-icon
        name="shopping-cart"
        :info="$store.getters.getAllCount"
        class="cart"
        @click="show2"
      />
      <span class="tip">已选中{{$store.getters.getAllCount}}件商品</span>
    </van-submit-bar>
    <van-action-sheet
      v-model="showCart"
      title="商品列表"
      class="cartList"
    >
      <p class="sel">
        <span class="already">已选商品</span>
        <span
          class="clear"
          @click="clearAll"
        >清空</span>
      </p>
      <p
        class="cart_item"
        v-for="(item,index) in cartList"
        :key="index"
      >
        <span class="name">{{item.name}}</span>
        <span class="price">¥{{item.price}}</span>
        <van-stepper
          :name='item.id'
          v-model="item.num"
          @change="changeVal"
        />
        <van-icon name="clear" class="sub" @click="delSelect(index)"/>
      </p>
      <p class="item">
        <span class="name">餐盒</span>
        <span class="num">{{$store.getters.getAllCount}}</span>
      </p>
      <p class="item">
        <span class="name">配送费</span>
        <span class="num">¥{{deliveryPrice}}</span>
      </p>
    </van-action-sheet>

  </div>
</template>
<script>
import { log } from "util";
export default {
  data: () => ({
    val: 1,
    show: false,
    showCart: false,
    activeIndex: 0,
    items: [],
    select: 0,
    foods: [],
    cartList: [],
    deliveryPrice: 0,
    total: 0,
    sellerName:''
  }),
  props: ["id"],
  created() {
    this.getgoods();
    this.getCart();
    this.getSellerName();
  },
  methods: {
    clickNav(index) {
      this.select = index;
    },
    show2() {
      this.showCart = !this.showCart;
    },
    async getgoods() {
      const {
        data: { status, goods }
      } = await this.$axios.get("/api/getdetail/goods");
      goods.forEach(item => {
        let param = {};
        param.text = item.name;
        this.items.push(param);
        this.foods.push(item.foods);
      });
      // console.log(goods);
      // console.log(this.foods);
    },
    goInfo(id) {
      this.$router.push("/home/goodlist/" + id);
    },
    addCart(food) {
      // console.log(food);
      let foods={
        id:food.id,
        seller:this.id,
        name:food.name,
        price:food.price,
        num:1,
        src:food.icon,
        deliveryPrice:this.deliveryPrice,
        sellerName:this.sellerName
      }
      this.$store.dispatch("addCart", foods);
      this.getCart();
      this.total = this.$store.getters.getTotal + this.deliveryPrice;
    },
    getCart(){
      let cartList=JSON.parse(localStorage.getItem('cartList') || '[]');
      cartList.forEach(item=>{
        if(item.seller!==this.id){
          this.clearAll();
        }
      })
      this.cartList=cartList;
    },
    changeVal(val, det) {
      // console.log(val, det);
      let updateMsg = {
        val,
        det
      };
      this.$store.dispatch("updateCount", updateMsg);
      this.total = this.$store.getters.getTotal + this.deliveryPrice;
    },
    delSelect(index){
      // console.log(index);
      this.cartList.splice(index,1);
      this.$store.dispatch("deleteCartItem", index);
    },
    goPay() {
      let user=JSON.parse(localStorage.getItem('user') || '[]');
      console.log(user);
      if(user.length==0){
        this.$Toast('请先登录');
        return;
      }
      if(this.cartList.length===0){
        this.$Toast('购物车空空如也');
        return;
      }
      this.$router.push("/home/pay/" + this.id);
    },
    async getSellerName() {
      const {
        data: { status, sellers }
      } = await this.$axios.get("api/getdetail/seller");
      // console.log(sellers);
      sellers.forEach(item => {
        if (item.id === this.id) {
          this.sellerName=item.seller.name;
          this.deliveryPrice = item.seller.deliveryPrice;
          this.total = this.$store.getters.getTotal + this.deliveryPrice;
        }
      });
      // console.log(this.sellerName);
    },
    clearAll() {
      this.$store.dispatch("clearAll");
      this.cartList = [];
      this.total = 0;
    }
  }
};
</script>
<style lang="less" scoped>
.classify {
  height: 500px;
  margin-top: 10px;
  .select {
    width: 100%;
    height: 500px !important;
    display: flex;
    margin-bottom: 80px;
    .van-tree-select__nav {
      flex: 1;
    }
    .van-tree-select__content {
      flex: 3;
      .cf_r_item {
        font-size: 12px;
        .title {
          color: #999;
          .rx {
            font-size: 14px;
            font-weight: 600;
          }
        }
        .desc {
          .d1 {
            color: #999;
            margin: 0;
          }
          .d2 {
            margin: 2px 0;
            color: #999;
          }
        }
        .price {
          .new {
            color: #ff5339;
            font-size: 14px;
            margin-right: 10px;
          }
          .old {
            color: #999;
            text-decoration: line-through;
          }
        }
      }
    }
  }
  .barBottom {
    position: fixed;
    z-index: 10000;
    bottom: 0;
    background-color: rgba(61, 61, 63, 0.9);
    .van-info {
      width: 20px;
      height: 20px;
      line-height: 20px;
    }
    .van-submit-bar__bar {
      padding: 0;
    }
    .cart {
      width: 50px;
      height: 50px;
      color: white;
      text-align: center;
      line-height: 50px;
      font-size: 30px;
      background-color: rgb(35, 149, 255);
      border-radius: 50%;
      position: absolute;
      top: -20px;
      left: 10px;
      .van-info {
        font-size: 14px;
        top: 10px;
        right: 10px;
      }
    }
    .tip {
      margin-left: 72px;
      font-size: 12px;
      color: #ccc;
    }
    .van-submit-bar__button {
      border-radius: 0;
      height: 100%;
      background-color: rgb(35, 149, 255) !important;
    }
  }
  .cartList {
    position: fixed;
    bottom: 50px;
    font-size: 12px;
    padding-bottom: 30px;
    .sel {
      width: 100%;
      height: 30px;
      background-color: #eceff1;
      display: flex;
      padding: 0 10px;
      justify-content: space-between;
      align-items: center;
      color: #999;
      box-sizing: border-box;
      .already {
      }
      .clear {
      }
    }
    .cart_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      padding: 0 15px;
      .name {
        font-size: 12px;
        color: #999;
      }
      .price {
        font-size: 12px;
        color: #ff5339;
      }
      .sub{
        font-size: 22px;
        color: rgb(35, 149, 255);
      }
    }
    .item {
      display: flex;
      justify-content: space-between;
      color: #999;
      box-sizing: border-box;
      padding: 0 15px;
      .name {
      }
      .num {
        color: rgb(255, 83, 57);
      }
    }
  }
}
</style>